import React from "react";
import * as PropTypes from "prop-types";

/**
 * Input Checkbox Component
 */
export default class Checkbox extends React.Component
{
    /**
     * 表单类名
     */
    className = "checkbox";

    constructor (props, context)
    {
        super(props, context);
        this.state = {className : "checkbox"};
    }

    /**
     * 默认属性
     */
    static defaultProps =
    {
        label : "",
        name : "",
        value : "",
        style : {},
        placeholder : "",
    };

    static propTypes =
    {
        label : PropTypes.string,
        name : PropTypes.string,
        value : PropTypes.string,
        placeholder : PropTypes.string,
        style : PropTypes.object
    };

    handleClick = () =>
    {
        let className = "checkbox";

        if ("checkbox" === this.state.className) {
            className += " active";
        }

        this.setState({className:className});
    };

    render ()
    {
        return <label>
            {this.props.label ? <span className="title">{this.props.label}</span> : ""}

            <div className={this.state.className} onClick={this.handleClick}>C</div>
            <input type="hidden" value={this.props.value} name={this.props.name}/>
        </label>
    }
}